<template>
  <div class="register">
    <Nav />
    <div class="content">
      <div class="left">
        <!-- <img src="https://spcn-webfront.skypixel.com/skypixel/v2/public/assets/images/skypixel-auth-bg.def7b558.jpg" alt=""> -->
      </div>
      <div class="right">
        <div class="package">
          <div class="top">
            <span>登录</span>
          </div>
          <!-- <div class="under">
            <span class="text">账号：</span>
            <input type="text" v-model="changeinput1" placeholder="请输入电话或邮箱" /><br />
            <span class="text">密码：</span>
            <input type="password" v-model="changeinput2" placeholder="请输入密码" ref="password"
              v-show="!showpass" />
            <input type="text" v-model="changeinput2" placeholder="请输入密码" ref="password"
              v-show="showpass" />
            <span @click="showpass = !showpass" class="eyespan">
              <span v-show="showpass"><img src="../../image/openEye.png" /></span>
              <span v-show="!showpass"><img src="../../image/closeEye.png" /></span>
            </span>

            <br />
            <span class="text">验证码：</span>
            <input type="text" v-model="changeinput3" placeholder="请输入验证码" />
            <span class="verifytext" ref="yanzhengma" v-on:click="getverfy"></span>
            <br />
            <div class="verifyerr" ref="verifyerr"></div>
            <button class="denglubtn" @click="loginbtn">登录</button>
          </div> -->
          <div class="formBox">
            <el-form ref="form" :model="form" label-width="70px">
              <el-form-item label="账号：">
                <el-input type="text" class="myinput" v-model="form.changeinput1"
                  placeholder="请输入电话或邮箱">
                </el-input>
              </el-form-item>
              <el-form-item label="密码：">
                <el-input type="password" class="myinput" v-model="form.changeinput2"
                  placeholder="请输入密码" ref="password" show-password>
                </el-input>
              </el-form-item>
              <el-form-item label="验证码：">
                <div class="verifyInputBox">
                  <el-input type="text" class="verifyInput" v-model="form.changeinput3"
                    placeholder="请输入验证码">
                  </el-input>
                  <div class="verifyBox">
                    <div class="verifytext" ref="yanzhengma" @click="getverfy"></div>
                  </div>
                </div>
              </el-form-item>
            </el-form>
            <div class="btnBox">
              <button class="denglubtn" @click="loginbtn2('form')">登录</button>
            </div>
          </div>
          <div class="buttombox">
            <p class="other">其他登录方式</p>
            <div class="buttomboxson2">
              <div class="tupian">
                <a href="#"><img src="../../image/QQ.png" alt="" /></a>
                <a href="#"><img src="../../image/weixin.png" alt="" /></a>
                <a href="#"><img src="../../image/weibo.png" alt="" /></a>
              </div>
              <p class="text1">
                使用以上任意登录方式登录均代表您已阅读并同意本APP
                <span class="xieyi">《用户协议》</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Foot />
  </div>
</template>

<script>
export default {
  components: {
    Nav: () => import("../../components/Nav.vue"),
    Foot: () => import("../../components/Footnav.vue"),
  },
  props: {},
  data() {
    return {
      flag: false,
      showpass: false,
      password: "",
      // changeinput1: "",
      // changeinput2: "",
      // changeinput3: "",
      form: {
        changeinput1: "",
        changeinput2: "",
        changeinput3: "",
      },
      message: null,
    };
  },
  watch: {},
  computed: {},
  methods: {
    /*  */
    /* 获取验证码 */

    async getverfy() {
      var res = await this.$axios("/api/verify");
      this.$refs.yanzhengma.innerHTML = res.data;
    },
    /* 获取账号密码 */
    // async loginbtn() {
    //   // console.log("账号通过");
    //   this.password = this.$refs.password.currentValue;
    //   var reg = /^[1][3,4,5,7,8][0-9]{9}$/;
    //   var reg1 = /^\w+@[a-zA-Z0-9]{2,10}(?:.[a-z]{2,4}){1,3}$/;
    //   if (
    //     // reg1.test(this.changeinput1) == true ||
    //     reg.test(this.changeinput1) == true
    //   ) {
    //     alert("登录成功")
    //     //验证码 校验
    //     /******** 发起网络请求 查找用户信息 传递参数 检查密码是否正确  设置登录缓存状态********/
    //     var res1 = await this.$axios.post("/api/verify", {
    //       zhanghao: this.changeinput1,
    //       mima: this.changeinput2,
    //       verifytext: this.changeinput3,
    //       innerHeight: 60
    //     });
    //     // console.log(res1.data.res1);
    //     if (res1.status == 200) {
    //       console.log("网络请求成功");
    //       this.$refs.verifyerr.innerHTML = res1.data.verify;
    //       if (res1.data.res1) {
    //         if (this.changeinput2 == res1.data.res1[0].password) {
    //           alert("登录成功");
    //           window.localStorage.setItem(
    //             "user",
    //             `{isLogin:true,userid:${res1.data.res1[0].uid},uesrname:${res1.data.res1[0].tel}}`
    //           );
    //           window.location.reload();
    //           /* 隐藏模态 */
    //           console.log(this.$parent);
    //         } else {
    //           this.$refs.verifyerr.innerHTML =
    //             res1.data.verify + ",账号或密码错误";
    //         }
    //       }
    //     }
    //   } else {
    //     // alert("账号格式错误");
    //   }
    // },
    loginbtn2(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = {
            email: this.form.changeinput1,
            password: this.form.changeinput2,
            verify: this.form.changeinput3,
          };
          this.$axios
            .post("/api/login", params)
            .then((res) => {
              if (res.data.code === 4001) {
                this.$message.error('验证码错误！！！');
              } else if (res.data.code === 4003) {
                this.$message.error('未注册，请注册！！！');
              } else if (res.data.code === 4004) {
                this.$message.error('密码错误！！！');
              } else if (res.data.code === 2002) {
                this.$message({
                  message: '登录成功！',
                  type: 'success'
                });
                window.localStorage.setItem("islogin", this.form.changeinput1);
                this.$router.push("/");
              }
            });
        } else {
          return false;
        }
      });
    },
    //  getverfy:function(){
    // this.$axios('/api/verify').then(function(res){
    //   this.item=res.data
    //   console.log(res.data);
    // }).cahth(function(err){
    //   console.log(err);
    // })
    // }
  },
  created() { },
  mounted() {
    this.getverfy();
  },
};
</script>
<style scoped>
.content {
  display: flex;
  flex: 1 1 auto;
}
.left {
  width: 760px;
  height: 528px;
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  background-image: url(//spcn-webfront.skypixel.com/skypixel/v2/public/assets/images/skypixel-auth-bg.def7b558.jpg);
}
.right {
  width: 760px;
  height: 528px;
  display: flex;
  align-items: center;
  background-color: white;
}
.right .package {
  width: 100%;
  height: 528px;
  margin: 0 auto;
  margin-left: 4.4rem;
}
.right .package .top {
  font-size: 2rem;
  margin-bottom: 1.6rem;
  font-weight: 600;
}

.inputbox {
  width: 50%;
  height: 300px;
  text-align: left;
  /* background-color: rgb(252, 167, 167); */
}
.inputbox input {
  width: 300px;
  height: 40px;
  margin-top: 25px;
  outline: none;
  border-radius: 5px;
  border: 1px solid gray;
}
.inputbox .text {
  display: inline-block;
  width: 60px;
  height: 40px;
  text-align: right;
  font-size: 14px;
}
.eyespan {
  vertical-align: middle;
  margin-left: -40px;
}
.verifyerr {
  color: red;
  width: 400px;
  text-align: center;
}
.verifytext {
  width: 100px;
  height: 50px;
  display: inline-block;
  vertical-align: middle;
  margin-top: -20px;
}
::v-deep svg {
  height: 60px !important;
}
/* 登录按钮 */
.denglubtn {
  width: 300px;
  height: 37px;
  background-image: url("../../image/login-btn.png");
  background-size: contain;
  margin-top: 34px;
  margin-left: 64px;
  border-radius: 20px;
  border: 0;
  color: white;
  font-size: 18px;
}
.buttombox {
  width: 100%;
  margin: 20px auto;
  position: relative;
}
.buttombox .text1 {
  color: #b6b6b6;
  font-size: 12px;
  margin-top: 20px;
}
.buttombox .xieyi {
  color: #2cafef;
  font-size: 12px;
}
.other::before {
  /* content: ""; */
  position: absolute;
  left: 50px;
  top: 10px;
  width: 400px;
  height: 2px;
  background: #ddd;
}
.other::after {
  /* content: ""; */
  position: absolute;
  right: 50px;
  top: 10px;
  width: 400px;
  height: 2px;
  background: #ddd;
}
.buttomboxson2 .tupian {
  margin-top: 20px;
}
/* 三张小图qq 微信 微博 */
.tupian img {
  width: 40px;
  height: 40px;
  margin-right: 20px;
}
::v-deep .el-form-item {
  width: 470px !important;
  margin: 0 auto;
}
::v-deep .el-form-item__content {
  margin-bottom: 20px;
}
.myinput {
  width: 400px !important;
}
.verifyInputBox {
  display: flex;
}
.verifyInput {
  width: 300px !important;
}
.verifyBox {
  box-sizing: border-box;
  height: 50px;
}
</style>